<!-- 简易卡片 -->

<template>
  <div :class="cardClass" :style="cardStyle">
    <div :class="panelClass">
      <!-- 头部 -->
      <div v-if="hasHeader" :class="`${panelClass}-header`">
        <slot name="header" />
      </div>

      <!-- 无滚动条 -->
      <div v-if="noScroll" :class="`${panelClass}-no-scroll`">
        <div v-if="hasTitle" :class="`${panelClass}-title`">
          <slot name="title">
            <span>{{ title }}</span>
          </slot>
        </div>

        <div :class="`${panelClass}-body`">
          <slot />
        </div>
      </div>

      <!-- 有滚动条 -->
      <EasyScroll v-else :wide="wide" :hasX="hasX" :noY="noY">
        <div v-if="hasTitle" :class="`${panelClass}-title`">
          <slot name="title">
            <span>{{ title }}</span>
          </slot>
        </div>

        <div :class="`${panelClass}-body`">
          <slot />
        </div>
      </EasyScroll>

      <!-- 尾部 -->
      <div v-if="hasFooter" :class="`${panelClass}-footer`">
        <slot name="footer" />
      </div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixPath from '../mixPath'
import mixForm from '../form/mixForm'

const name = 'EasyCard'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 宽度样式类
     */
    widthClass: mixForm.computed.itemClass,

    /**
     * 宽度样式对象
     */
    widthStyle: mixForm.computed.itemStyle,

    /**
     * 是否有标题
     */
    hasTitle() {
      if (this.title) return true
      if (!this.$scopedSlots) return false
      return this.$scopedSlots.title
    },

    /**
     * 卡片样式类
     */
    cardClass() {
      const { $options, widthClass, noPadding } = this
      return `CoreWeb-${$options.name} ${widthClass}${noPadding ? ' no-padding' : ''}`
    },

    /**
     * 卡片样式对象
     */
    cardStyle() {
      const { widthStyle, height, minHeight, full, minFull, gap, getSize } = this
      const style = CORE.clone(widthStyle || {})
      if (full) style.height = '100%'
      if (minFull) style.minHeight = '100%'
      if (height) style.height = getSize(height)
      if (minHeight) style.minHeight = getSize(minHeight)
      if (gap) style.padding = getSize(gap)
      return style
    },

    /**
     * 面板样式类
     */
    panelClass() {
      const { $options } = this
      return `CoreWeb-${$options.name}-panel`
    },

    /**
     * 是否有页头
     */
    hasHeader() {
      if (!this.$scopedSlots) return false
      return this.$scopedSlots.header
    },

    /**
     * 是否有页脚
     */
    hasFooter() {
      if (!this.$scopedSlots) return false
      return this.$scopedSlots.footer
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取尺寸
     */
    getSize: mixPath.methods.getSize,
  },
}
</script>
